import {Component, Input, OnInit} from '@angular/core';
import {
  FormGroup,
  FormBuilder,
  Validators,
  FormControl
} from '@angular/forms';
import {Observable, of} from 'rxjs';
import {NzMessageService} from 'ng-zorro-antd';
import {comparisonValue} from '@shared/utils/data.utils';

import {I18NService} from '@core/i18n/i18n.service';
import {Menu} from '../model/menu';
import {MenuService} from '../services/menu.service';

import {PopupRes} from '@shared/popup/popup.interface';

@Component({
  selector: 'menu-modify',
  templateUrl: './menu-modify.html'
})

export class MenuModifyComponent implements OnInit, PopupRes {

  _id: string;

  @Input()
  set id(val: string) {
    this._id = val;
  }

  validateForm: FormGroup;

  searchOptions = [];
  dept: number;
  isType;
  tempItem: Menu;

  isCheck = true;

  page = {
    pageNo: 1,
    pageSize: 30
  };

  constructor(
    private fb: FormBuilder,
    private menuService: MenuService,
    private message: NzMessageService,
    private i18nService: I18NService
  ) {
    this.validateForm = this.fb.group({
      name: [null, [Validators.required]],
      mDesc: [null, [Validators.required]],
      url: [null, [Validators.required]],
      sort: [0, [Validators.required]],
      icon: null,
      type: [null, [Validators.required]],
      dept: [1, [Validators.required]],
      pid: [-1, [Validators.required]]
    });
  }

  ngOnInit(): void {
    if (this._id !== undefined) {
      this.getMenu(this._id);
    }
    this.getAllMenusByPage();
    this.isType = true;
  }

  optionChange(e) {
    if (e === -1) {
      this.isType = true;
    } else {
      this.isType = false;
    }
  }

  submit(): Observable<any> {
    return new Observable((sub) => {
      if (this.isCheck) {
        this.isCheck = false;
        if (this._id !== undefined) {
          const saveVal: Menu = {
            id: this._id,
            ...comparisonValue(this.validateForm.value, this.tempItem)
          };
          this.update(saveVal).subscribe(res => {
            sub.next();
          }, err => {
            sub.error();
          });
        } else {
          this.add(this.validateForm.value).subscribe(res => {
            sub.next();
          }, err => {
            sub.error();
          });
        }
      }
    });
  }

  cancel(): Observable<any> {
    return of('cancel');
  }

  getAllMenusByPage(): void {
    this.menuService.getAllMenusByPage(1, 500)
      .subscribe(res => {
        this.searchOptions = res.records;
      });
  }

  getMenu(id: string): void {
    this.menuService.getMenuById(id)
      .subscribe(res => {
        this.tempItem = res;
        this.dept = res.dept;
        this.validateForm.patchValue(res);
        if (res.pid !== -1) {
          // this.searchChange('', res.pid);
        }
      });
  }

  searchChange(val?: string, pid?: number): void {
    this.menuService.getMenuByNameOrPid(this.page.pageNo, this.page.pageSize, val, pid)
      .subscribe(res => {
        this.searchOptions = res.records;
      });
  }

  add(item: Menu): Observable<void> {
    return new Observable((sub) => {
      this.menuService.addMenu(item)
        .subscribe(res => {
          this.message.success(this.i18nService.translate('modify.return.add_success'));
          this.isCheck = true;
          sub.next();
        }, err => {
          this.isCheck = true;
          sub.error();
        });
    });
  }

  update(item: Menu): Observable<void> {
    return new Observable((sub) => {
      this.menuService.updateMenu(item)
        .subscribe(res => {
          if (res) {
            this.message.success(this.i18nService.translate('modify.return.edit_success'));
          } else {
            this.message.error(this.i18nService.translate('modify.return.eidt_error'));
          }
          this.isCheck = true;
          sub.next();
        }, err => {
          this.isCheck = true;
          sub.error();
        });
    });
  }
}
